<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>优化代码（去掉offset）</title>
	<style type="text/css">
        div{
        	width:200px;height: 200px;border:1px solid black;background: yellow;opacity: 0.3;
        }
	</style>
	<script type="text/javascript">
        window.onload = function(){
        	
        	var oDiv1 = document.getElementById('div1');
        	oDiv1.onmouseover = function(){
        		startMove(this,'opacity',100);  //最后这里传递需要变的参数
        	}
        	oDiv1.onmouseout = function(){
        		startMove(this,'opacity',30);
        	}

           
        }


        //获取样式的方法
    	function getStyle(obj,name){
    		if(obj.currentStyle){
    			return obj.currentStyle[name];
    		}else{
    			return getComputedStyle(obj,false)[name];
    		}
    	}

        //startMove()方法
        //添加一个参数attr，实现一套框架多个使用
        function startMove(obj,attr,iTarget){
        	clearInterval(obj.timer);
        	
        	obj.timer = setInterval(function(){
        		//把offset去掉，改用currentstyle获取样式
	        	//声明一个变量存样式
	        	//var cur = parseInt(getStyle(obj,'width'));  //这样不能动态改变样式，实现多运动框架，所以需要添加一个参数
	        	//var cur = parseInt(getStyle(obj,attr));  //这里的属性用变量存储
            

                //当用到opacity属性时，之前的运动框架不适用了，需要修改一些东西
                //首先，判断属性是什么，使用对应的框架
                var cur = 0;
                if(attr == 'opacity'){
                    //属性是opacity,走if,opacity是个浮点数，不能直接取整,会出错
                    //Math.round():四舍五入
                    cur = Math.round(parseFloat(getStyle(obj,attr))*100);

                }else{
                    //其他属性，走else
                    cur = parseInt(getStyle(obj,attr));
                }

        		var speed = (iTarget-cur)/6;    
        		speed = speed>0?Math.ceil(speed):Math.floor(speed);

        		if(cur == iTarget){
        			clearInterval(obj.timer);
        		}else{
                    //同理，现在结果也要做判断
                    if(attr == 'opacity'){
                        
                        obj.style.opacity = (cur+speed)/100;

                    }else{
                       obj.style[attr] = cur +speed+'px';//这里的属性用变量存储 
                    }
        			
        		}

        	},30);

        }
	</script>
</head>
<body>

    <div id="div1"></div>
   
	
</body>
</html>